import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
import UnoCSS from "unocss/vite";

import { resolve } from "path";

const pathSrc = resolve(__dirname, "src");

export default defineConfig({
  // 路径别名
  resolve: {
    alias: {
      "@": pathSrc,
    },
  },
  plugins: [
    UnoCSS({
      hmrTopLevelAwait: false,
    }),
    react(),
    createSvgIconsPlugin({
      // 缓存图标位置
      iconDirs: [resolve(pathSrc, "assets/icons")],
      symbolId: "icon-[dir]-[name]",
    }),
  ],
  css: {
    // css预处理器
    preprocessorOptions: {
      scss: {
        // 指定了要使用的SASS编译器API版本
        api: "modern-compiler",
        // 会在每个scss文件的开头自动插入，作用是引入全局的SCSS变量文件，并将其所有变量和混入暴露出来，可以直接使用而无需再次导入
        additionalData: `
          @use "@/styles/variables.scss" as *;
        `,
      },
    },
  },
});
